@charset "utf-8";
/*初始化*/
*{
    margin:0;
    padding:0;
    border: 0;
    box-sizing:border-box;
}
/*html{-webkit-text-size-adjust:none;}*/

ol, ul, li{
    list-style: none;
}
a{
    text-decoration: none;
    blr:expression(this.onFocus=this.blur());
    color:#333;
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去除iPhone 点击的背景块*/
}
a:focus {
    outline: none;
}
a.hidefocus {
    outline: none;
}
img{
    display: block;
}
i{
    font-style: normal;
}
input{
    outline: none;
    background:none;
    font:400 .3rem '微软雅黑';
}
input[type=text], input[type=submit], input[type=button] {
    -webkit-appearance: none; /*去除iPhone input默认样式}*/
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"]{ -moz-appearance: textfield; }  /*去掉上下箭头*/
::-webkit-scrollbar { display:none; }  /*去除iPhone 滚动条*/

body{
    width: 100vw;
    height:100vh;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    background:#fff;
    color:#333;
    /*font-size: 14px;*/
    font-size: .3rem;
    word-break: break-all;
}


/*------------------------------------------------------  base ------------------------------------------------------*/
.fl{float: left;}
.fr{float: right;}
.left{text-align: left;}
.right{text-align: right;}
.center{text-align: center;}
.vmid{vertical-align: middle;}
.hidden{overflow: hidden;}
.none{display: none;}
.block{display: block;}
.inline-block{display: inline-block;}
.bold{font-weight: bold;}
.bg-no{background:none;}
.border-no{border:none;}
.outline-no{outline: none;}
.color-no{color:transparent;}
.caret-no{caret-color:transparent;}  /*input去掉光标颜色 IOS不支持*/
.border-box{-webkit-box-sizing: border-box;}
.content-box{-webkit-box-sizing: content-box;}
.scroll-x{overflow-x: scroll;}
.scroll-y{overflow-y: scroll;}
.cursor{cursor: pointer;}
.filter-gray{-webkit-filter: grayscale(1);}
.rotate-180{transform: rotate(180deg);}
.scale-2{transform:scale(1.8);}
.blur{filter: blur(5px);}
.bright-5{-webkit-filter:brightness(.5)}
.bright-7{-webkit-filter:brightness(.7)}
.opacity-0{opacity: 0;}
.opacity-1{opacity: 1;}
.opacity-5{opacity: .5;}
.line-h-1{line-height: 1.6;}
.line-h-2{line-height: 2;}
.line-h-3{line-height: 3;}
.line-h-4{line-height: 4;}
.indent-1{text-indent: 1em;}
.indent-2{text-indent: 2em;}
.letter-space-2{letter-spacing: 2px;}
.f1{flex:1;overflow: hidden;}
.f2{flex:2;overflow: hidden;}
.f3{flex:3;overflow: hidden;}
.f4{flex:4;overflow: hidden;}
.f5{flex:5;overflow: hidden;}
.f6{flex:6;overflow: hidden;}
.f7{flex:7;overflow: hidden;}
.f8{flex:8;overflow: hidden;}
.f9{flex:9;overflow: hidden;}
.flex{display: flex;display:-webkit-flex;align-items: center;}
.flex-x-s{justify-content: flex-start;}
.flex-x-e{justify-content: flex-end;}
.flex-x-c{justify-content: center}
.flex-y-s{align-items: flex-start;}
.flex-y-e{align-items: flex-end;}
.flex-y-c{align-items:center;}
.flex-r-w{flex-flow: row wrap;}
.flex-col{flex-direction: column;}
.flex-shrink{flex-shrink: 0;}
.space-ard{justify-content: space-around;}
.space-btw{justify-content: space-between;}
.flex-stretch{align-items: stretch;}
.ellipsis{white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
.ellipsis2, .ellipsis3, .ellipse5{overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
.ellipsis2{ -webkit-line-clamp: 2;line-height: .4rem;max-height:.8rem;}
.ellipsis3{ -webkit-line-clamp: 3;line-height: .4rem;max-height:1.2rem;}
.ellipsis5{ -webkit-line-clamp: 5;line-height: .4rem;max-height:2rem;}
.re{position: relative;}
.ab{position: absolute;}
.fix{position: fixed;width: 100%;}
.auto{margin:auto;}
.z-2{z-index: 2;}
.l-t-0{left:0;top:0}
.l-b-0{left:0;bottom:0}
.l-r-0{left:0;right:0}
.t-r-0{top:0;right:0}
.t-b-0{top:0;bottom:0}
.r-b-0{right:0;bottom:0}
.l-b-1{left:10px;bottom:10px}
.r-t-1{right:10px;top:10px}
.r-b-1{right:10px;bottom:10px}
.col-1{width:10%;}
.col-2{width:20%;}
.col-3{width:30%;}
.col-4{width:40%;}
.col-5{width:50%;}
.col-6{width:60%;}
.col-7{width:70%;}
.col-8{width:80%;}
.col-9{width:90%;}
.col-10{width:100%;}
.row-10{height:100%;}
.col-06{width: 6%;}
.col-08{width: 8%;}
.col-15{width:15%;}
.col-25{width:25%;}
.col-45{width:45%;}
.col-48{width:48%;}
.col-85{width:85%;}
.min-10-vh{min-height: 100vh;}
.col-10-vw{width:100vw;}
.row-10-vh{height:100vh;}
.row-3-vh{height:30vh;overflow: hidden;}
.row-4-vh{height:40vh;overflow: hidden;}
.row-5-vh{height:50vh;overflow: hidden;}
.row-6-vh{height:60vh;overflow: hidden;}
.col-2-vw{width:20vw;}
.font1{font-size: .1rem;}
.font2{font-size: .2rem;}
.font3{font-size: .3rem;}
.font4{font-size: .4rem;}
.font5{font-size: .5rem;}
.font6{font-size: .6rem;}
.font8{font-size: .8rem;}
.font25{font-size: .25rem;}
.font35{font-size: .35rem;}
.border-radius-1{border-radius: .1rem;}
.border-radius-2{border-radius: .2rem;}
.border-radius-5{border-radius: .5rem;}
.border-radius-y{border-radius: 50%;}


/*------------------------------------------------------  颜色 ------------------------------------------------------*/
.color-white{color:#fff;}
.color-black{color:#333!important;}
.color-gray{color: #787876;}
.color-666{color: #666;}
.color-red{color:#f3302a;}
.color-yellow{color:#936517;}
.color-orange{color:#ffac40;}
.color-blue{color: #417988;}
.color-green{color: #07cbbd;}
.color-purple{color:#b34456;}

.bg-white{background:#fff;}
.bg-black{background:#2b2a39;}
.bg-gray{background:#f3f3f3;}
.bg-gray-l{background:#f7f7f7;}
.bg-gray-d{background:#3a3949;}
.bg-red{background:#dc242e;}
.bg-yellow{background:#efab50;}
.bg-orange{background:#ea733a;}
.bg-green{background:#58bc07;}
.bg-blue{background:#317db7;}
.bg-blue-l{background:#25e5ef;}
.bg-purple{background:#a65ed3;}
.bg-white-5{background:rgba(255,255,255,.5)}
.bg-black-5{background:rgba(0,0,0,.5)}

.border-white{border:1px solid #fff;}
.border-black{border:1px solid #3a384d;}
.border-gray{border:1px solid #e6e6e6;}
.border-red{border:1px solid #f60339;}
.border-yellow{border:1px solid #ffcc00;}
.border-orange{border:1px solid #ffac40;}
.border-blue{border:1px solid #17a1f0;}
.border-green{border:1px solid #07CBBD;}
.border-t-gray{border-top: 1px solid #e6e6e6;}
.border-b-gray{border-bottom: 1px solid #e6e6e6;}
.border-r-gray{border-right: 1px solid #e6e6e6;}
.border-b-white{border-bottom: 1px solid #fff;}
.border-r-white{border-right: 1px solid #fff;}
.border-b-blue{border-bottom:1px solid #0faeff;}
.border-b-green{border-bottom:1px solid #07CBBD;}
.border-b-purple{border-bottom:1px solid #b34456;}
.border-gray-dotted{border:1px dotted #6e6d7a;}
.border-t-1-gray{border-top: .1rem solid #333242;}
.border-t-2-gray{border-top: .2rem solid #333242;}
.border-t-3-gray{border-top: .3rem solid #f3f2f1;}
.border-b-1-gray{border-bottom:.1rem solid #333242;}
.border-b-2-gray{border-bottom:.2rem solid #333242;}
.border-b-3-gray{border-bottom:.3rem solid #f3f2f1;}


/*------------------------------------------------------  边距rem ------------------------------------------------------*/
.pad-1{padding:.1rem;}
.pad-2{padding:.2rem;}
.pad-3{padding:.3rem;}
.pad-4{padding:.4rem;}
.pad-5{padding:.5rem;}
.pad-t-b-1{padding:.1rem 0;}
.pad-t-b-2{padding:.2rem 0;}
.pad-t-b-3{padding:.3rem 0;}
.pad-t-b-5{padding:.5rem 0;}
.pad-l-r-1{padding:0 .1rem;}
.pad-l-r-2{padding:0 .2rem;}
.pad-l-r-3{padding:0 .3rem;}
.pad-l-r-4{padding:0 .4rem;}
.pad-l-r-5{padding:0 .5rem;}
.pad-t-1{padding-top:.1rem;}
.pad-t-2{padding-top:.2rem;}
.pad-t-3{padding-top:.3rem;}
.pad-t-5{padding-top:.5rem;}
.pad-b-1{padding-bottom:.1rem;}
.pad-b-2{padding-bottom:.2rem;}
.pad-b-3{padding-bottom:.3rem;}
.pad-b-5{padding-bottom:.5rem;}
.pad-l-1{padding-left:.1rem;}
.pad-l-2{padding-left:.2rem;}
.pad-l-3{padding-left:.3rem;}
.pad-l-4{padding-left:.4rem;}
.pad-l-5{padding-left:.5rem;}
.pad-r-1{padding-right:.1rem;}
.pad-r-2{padding-right:.2rem;}
.pad-r-3{padding-right:.3rem;}
.pad-r-4{padding-right:.4rem;}
.pad-r-5{padding-right:.5rem;}
.pad-1-2{padding:.1rem .2rem;}
.pad-2-3{padding:.2rem .3rem;}
.pad-2-5{padding:.2rem .5rem;}
.pad-3-5{padding:.3rem .5rem;}

.mar-1{margin:.1rem;}
.mar-2{margin:.2rem;}
.mar-3{margin:.3rem;}
.mar-4{margin:.4rem;}
.mar-5{margin:.5rem;}
.mar-t-b-1{margin:.1rem 0;}
.mar-t-b-2{margin:.2rem 0;}
.mar-t-b-3{margin:.3rem 0;}
.mar-t-b-5{margin:.5rem 0;}
.mar-l-r-1{margin:0 .1rem;}
.mar-l-r-2{margin:0 .2rem;}
.mar-l-r-3{margin:0 .3rem;}
.mar-l-r-4{margin:0 .4rem;}
.mar-l-r-5{margin:0 .5rem;}
.mar-t-1{margin-top:.1rem;}
.mar-t-2{margin-top:.2rem;}
.mar-t-3{margin-top:.3rem;}
.mar-t-5{margin-top:.5rem;}
.mar-b-1{margin-bottom:.1rem;}
.mar-b-2{margin-bottom:.2rem;}
.mar-b-3{margin-bottom:.3rem;}
.mar-b-5{margin-bottom:.5rem;}
.mar-l-2{margin-left:.2rem;}
.mar-l-3{margin-left:.3rem;}
.mar-l-4{margin-left:.4rem;}
.mar-l-5{margin-left:.5rem;}
.mar-r-2{margin-right:.2rem;}
.mar-r-3{margin-right:.3rem;}
.mar-r-4{margin-right:.4rem;}
.mar-r-5{margin-right:.5rem;}
.mar-5-2{margin:.5rem .2rem;}


/*------------------------------------------------------  PC端 ------------------------------------------------------*/
.w1200{width: 1200px;margin:auto;}
.jiant{font: 16px/1 '宋体';transform: rotate(90deg);}


/*------------------------------------------------------  移动端 ------------------------------------------------------*/
header{position: fixed;z-index: 9;left:0;top:0;width:100%;height:1rem;line-height:1rem;display: -webkit-flex;align-items:stretch!important;text-align: center;background:#1e293b;color:#fff;font-size: .4rem;box-shadow: 0 .1rem .1rem 0 rgba(136,136,136,0.15);}
.head-back:before{content: '';position: absolute;width: 10px;height:10px;border-style: solid;border-color: #fff;border-width:0 0 .1rem .1rem;left:.4rem;top:0;bottom:0;margin:auto;transform: rotate(45deg);z-index: -1;}
footer{position: fixed;z-index: 9;left:0;bottom:0;width:100%;height:1rem;text-align: center;display: -webkit-flex!important;align-items:center!important;background:#fff;font-size: 12px;color:#646464;box-shadow: 0 0 18px rgba(0,0,0,0.14);}
footer>a{flex:1;color: #999;}
footer img{display: block;margin:0 auto 3px;-webkit-filter: grayscale(1);width: 20px;height:20px;}
footer .active img{-webkit-filter: grayscale(0);}
footer .active p{color:#dc242e;}
section{height: 100%;padding:1rem 0;overflow-y: auto;}
@media screen and (min-width: 416px){
    html{
        background: #fafafa;
    }
    body{
        width: 440px;
        height: 740px;
        margin: auto;
        position: relative;
    }
    header, footer{
        position: absolute!important;
    }
    section{
        height: 100%;
        overflow-y: auto;
    }
}

/*------------------------------------------------------  alert ------------------------------------------------------*/
.loading{position: fixed;width: 1rem;height:1rem;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:.1rem;background:rgba(0,0,0,.3) url("../img/load.svg") no-repeat center;background-size: 70% 70%;z-index: 999;}
.loading:before{content: '';position: fixed;width:100%;height:100%;left:0;top:0;background: rgba(0,0,0,.1);z-index: -1; }
.toast{position:fixed;padding:.2rem;font-size:.25rem;background:rgba(0,0,0,.7);color:#fff;border-radius:.1rem;left:50%;transform: translateX(-50%);z-index: 99;bottom:-100%;animation: ani_bot .7s forwards;}
@keyframes ani_bot {
    0%{bottom:-100%;opacity: 0;}
    50%{bottom:10%;opacity: 1;}
    70%{bottom:8%;opacity: 1;}
    100%{bottom:9%;opacity: 1;}
}

.mask{position: fixed;left: 0;top:0;width: 100%;height:100vh;background:rgba(0,0,0,.3);z-index: 9;animation: mask .5s;}
.mask-box{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);z-index: 10;animation: maskbox .2s;width: 100%;}
@keyframes mask {
    from{opacity: 0}
    to{opacity: 1}
}
@keyframes maskbox {
    from{transform:translate(-50%,-50%) scale(.8);opacity: 0}
    to{transform:translate(-50%,-50%) scale(1);opacity: 1}
}




/*------------------------------------------------------  自定义class icon ------------------------------------------------------*/

/*单选*/
.radio{display: inline-block;width: 25px;height:25px;border-radius: 50%;position:relative;background:#e2e2e2;}
.radio:before{content: '';position: absolute;width: 7px;height:12px;border-style: solid;border-width: 0 1px 1px 0;transform:rotate(45deg);left:8px;top:3px;border-color: #fff;}
.radio.active{background: #317db7;}
.radio2{display: inline-block;width:15px;height:15px;border-radius: 50%;background:#f3f3f3;box-shadow:0 0 0 1px #f3f3f3, inset 0 0 0 4px #fff; }
.radio2.active{background:#3668c8;}

/*关闭*/
.close{display:inline-block;width: .4rem;height: .4rem;position: relative;}
.close:before, .close:after{content: '';position: absolute;width: 80%;height: .08rem;background: white;left:0;top:0;bottom:0;right:0;margin: auto;}
.close:before{transform: rotate(45deg);}
.close:after{transform: rotate(-45deg);}

/*箭头*/
.arrow3{display:inline-block;position:relative;width: .2rem;height:.2rem;}  /*span*/
.arrow3:before{content: '';position: absolute;width: 0;height:0;border: .1rem solid transparent;border-top: .1rem solid #333;left: 0;}


